<template>
  <div class="forum-category-container">
    <div class="header">
      <h2>论坛分类管理</h2>
      <p class="description">管理论坛的分类信息</p>
    </div>

    <div class="add-category">
      <input type="text" v-model="title" placeholder="请输入分类名称" class="input-field" />
      <button @click="add" class="add-btn">添加分类</button>
    </div>

    <div class="category-list">
      <table>
        <thead>
          <tr>
            <th>创建时间</th>
            <th>分类名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item._id" class="category-item">
            <td>{{ new Date(item.createdAt).toLocaleString() }}</td>
            <td>{{ item.name }}</td>
            <td class="actions">
              <button @click="Xg(item._id)" class="edit-btn">
                <i class="edit-icon"></i>修改
              </button>
              <button @click="Sc(item._id)" class="delete-btn">
                <i class="delete-icon"></i>删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="list.length === 0" class="empty-message">
        暂无分类数据
      </div>
    </div>

    <div class="edit-modal" v-show="flag">
      <div class="modal-content">
        <h3>修改分类</h3>
        <input type="text" v-model="str" placeholder="请输入新的分类名称" class="input-field" />
        <div class="modal-actions">
          <button @click="flag = false" class="cancel-btn">取消</button>
          <button @click="Bc(id)" class="save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      list: [],
      title: '',
      flag: false,
      str: '',
      id: '',
    }
  },
  methods: {
    get() {
      axios
        .get('http://47.94.6.186:3001/admin/post-category/list', {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log(res.data.data.list)
          this.list = res.data.data.list
        })
    },
    add() {
      axios
        .post(
          'http://47.94.6.186:3001/admin/post-category/create',
          {
            name: this.title,
          },
          {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          },
        )
        .then((res) => {
          console.log(res.data)
          this.get()
          this.title = ''
        })
    },
    Sc(id) {
      axios
        .delete(`http://47.94.6.186:3001/admin/post-category/delete/${id}`, {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log(res.data)
          this.get()
        })
    },
    Xg(id) {
      this.flag = true
      this.id = id
      this.str = this.list.find((item) => item._id == id).name
    },
    Bc(id) {
      axios
        .put(
          `http://47.94.6.186:3001/admin/post-category/update/${id}`,
          {
            name: this.str,
          },
          {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          },
        )
        .then((res) => {
          console.log(res.data)
          this.get()
          this.flag = false
        })
    },
  },
  mounted() {
    this.get()
  },
}
</script>
<style scoped>
.forum-category-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  margin-bottom: 24px;
}

.header h2 {
  font-size: 24px;
  color: #333;
  margin: 0 0 8px 0;
}

.description {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.add-category {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.input-field {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.input-field:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.add-btn {
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.add-btn:hover {
  background-color: #1565c0;
}

.category-list {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #f5f5f5;
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
}

th:last-child {
  text-align: center;
}

td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.category-item:nth-child(even) {
  background-color: #f9f9f9;
}

.category-item:hover {
  background-color: #f0f7ff;
}

.actions {
  display: flex;
  gap: 8px;
}

.edit-btn, .delete-btn {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  /* padding: 4px 6px; */
  border: none;
  border-radius: 3px;
  /* cursor: pointer; */
  font-size: 12px;
  transition: background-color 0.2s;
  min-height: 32px;
  min-width: 50px;
}

.edit-btn {
  background-color: #4caf50;
  color: white;
}

.edit-btn:hover {
  background-color: #43a047;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #e53935;
}

.edit-icon, .delete-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.empty-message {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

.edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 24px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 18px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-btn {
  background-color: #9e9e9e;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cancel-btn:hover {
  background-color: #757575;
}

.save-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.save-btn:hover {
  background-color: #43a047;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .add-category {
    flex-direction: column;
  }

  .actions {
    flex-direction: column;
    gap: 5px;
  }

  th, td {
    padding: 10px 8px;
  }
}
</style>
